<template>
  <div class="lix-cart">
    <div class="lix-cart__edit">
      <div @click="editAction">{{ editText }}</div>
    </div>
    <Abnor v-if="listData.length === 0" type="CART" @abnortap="abnortap" />
    <div class="lix-cart__list">
      <div class="lix-cart__fixededit"></div>
      <div class="lix-cart__cell vertical-center" v-for="(item, idx) in listData" :key="idx">
        <CheckBox :checked="item.checked" @change="checkedChange" :componentId="idx"/>
        <image class="lix-cart__image" :src="item.thumb"/>
        <div class="lix-cart__info">
          <p class="lix-cart__title">{{ item.name }}</p>
          <p class="lix-cart__sku">{{ item.sku }}</p>
          <p class="lix-cart__price"><span>￥</span>{{ item.price }}</p>
        </div>
        <div>
          <zan-stepper size="small" :componentId="idx" @handleZanStepperChange="handleZanStepperChange" :stepper="item.num" :min="stepper1.min" :max="stepper1.max"/>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 50px;"></div>
    <div class="lix-cart__fixed vertical-center" v-if="!isEditState">
      <CheckBox @change="checkAll" componentId="checkAll"/>
      <p>全选</p>
      <div class="lix-cart__bottomprice">
        <p>合计:</p>
        <p class="lix-cart__unit"><span>￥</span>{{ totalPrice }}</p>
      </div>
      <button class="zan-btn zan-btn--cart" :class="[selectCount === 0 ? 'zan-btn--notcart' : 'zan-btn--product']" @click="submit">结算({{ selectCount }})</button>
    </div>
    <!-- 编辑状态底部栏 -->
    <div class="lix-cart__fixed vertical-center" v-else>
      <CheckBox @change="checkAll" componentId="checkAll"/>
      <p>全选</p>
      <button class="zan-btn zan-btn--cart zan-btn--danger" @click="removeItem">删除</button>
    </div>
  </div>
</template>

<script>
import Abnor from '@/components/abnor/abnor';
import CheckBox from '@/components/checkbox';
import ZanStepper from '../../node_modules/mpvue-zanui/src/components/zan/stepper';
import {
  SHOPCART_GET_DATA,
  SHOPCART_UPDATE_ITEM,
  SHOPCART_CHECKED_ALL,
  SHOPCART_REMOVE_ITEM,
  SHOPCART_BALANCE
} from '../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
export default {
  components: {
    Abnor: Abnor,
    CheckBox: CheckBox,
    ZanStepper
  },
  computed: {
    ...mapGetters('cart', {
      // listData: 'data',
      totalPrice: 'totalPrice',
      selectCount: 'selectCount',
      listData: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    })
  },
  onShow() {
    this.destroyedState();
    this.getCartData({
      page: 1
    }).then(a => {
      console.log('------->', this.listData);
      console.log(this.$store);
    });
  },
  onLoad() {
    // this.destroyedState();
    // this.getCartData({
    //   page: 1
    // }).then(a => {
    //   console.log('------->', this.list);
    //   console.log(this.$store);
    // });
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.getListData(this.currentPage + 1);
    }
  },
  data() {
    return {
      showAbnor: false,
      stepper1: {
        stepper: 21,
        min: 0,
        max: 9999
      },
      editText: '编辑',
      isEditState: false
    };
  },
  methods: {
    ...mapActions('cart', {
      'getCartData': SHOPCART_GET_DATA,
      'updateItem': SHOPCART_UPDATE_ITEM,
      'checkAllAction': SHOPCART_CHECKED_ALL,
      'destroyedState': 'destroyedState',
      'removeItem': SHOPCART_REMOVE_ITEM,
      'submit': SHOPCART_BALANCE
    }),
    handleZanStepperChange(e) {
      const { componentId, stepper } = e;
      console.log(e);
      const item = this.listData[componentId];
      item.num = stepper;
      this.updateItem({
        idx: componentId,
        item: item
      });
    },
    checkedChange(e) {
      console.log(e);
      const { componentId, checked } = e;
      const item = this.listData[componentId];
      item.checked = checked;
      this.updateItem({
        idx: componentId,
        item: item
      });
    },
    checkAll(e) {
      console.log(e);
      const checked = e.checked;
      this.checkAllAction({
        checked: checked
      });
    },
    editAction(e) {
      this.isEditState = !this.isEditState;
      // 编辑状态
      if (this.isEditState) {
        this.editText = '完成';
      } else {
        // 完成编辑
        this.editText = '编辑';
      }
    },
    go2OrderPage(e) {
      wx.navigateTo({
        url: '/pages/createorder/main'
      });
    },
    abnortap(e) {
      wx.switchTab({
        url: '/pages/home'
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/shopcart.scss";
.zan-stepper {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: #b4b4b4 !important;
}
</style>
